<script setup>
import { ref } from 'vue'
import { DeleteFilled, PlusSquareFilled } from '@ant-design/icons-vue'
import Button from '@/components/Button.vue'
const checked = ref(false)
const state = ref({
  value1: '1',
  value2: '=',
  value3: null,
})
</script>
<template>
  <div class="w-full">
    <div class="flex flex-col gap-2 pb-6">
      <div class="text-center text-[12px]">
        We do not guarantee skin/gfx/color. The appearance of the items shown below are exemplary.
      </div>
      <div class="flex gap-3 justify-center">
        <DeleteFilled class="cursor-pointer" />
        <div class="flex gap-3 max-[750px]:flex-col">
          <a-select v-model:value="state.value1" :bordered="false" style="min-width: 300px">
            <a-select-option :value="num" v-for="num in 12"> {{ num }} </a-select-option>
          </a-select>
          <a-select v-model:value="state.value2" :bordered="false" style="min-width: 100px">
            <a-select-option value=">="> >= </a-select-option>
            <a-select-option value="="> = </a-select-option>
            <a-select-option value="<="> <= </a-select-option>
            <a-select-option value="between"> between </a-select-option>
          </a-select>
          <div class="flex gap-3 max-[750px]:justify-center">
            <input
              class="border w-20 h-8 outline-0 pl-2"
              type="number"
              v-model="state.value3"
              placeholder="min"
            />
            <input
              class="border w-20 outline-0 pl-2"
              type="number"
              v-model="state.value3"
              placeholder="max"
              v-if="state.value2 === 'between'"
            />
          </div>
        </div>
        <PlusSquareFilled class="cursor-pointer" />
      </div>
      <div class="flex gap-3 items-center justify-center">
        <a-checkbox v-model:checked="checked"> Ethereal? </a-checkbox>
        <Button bg="#f9a044"> Filter </Button>
        <Button> Reset </Button>
      </div>
    </div>
    <!-- goods-list -->
    <div class="grid grid-cols-2 items-start gap-5 max-[750px]:grid-cols-1">
      <div
        class="flex flex-col gap-5 bg-white border border-gray-200 p-3"
        v-for="item in 3"
        :key="'goods' + item"
      >
        <div class="text-xl font-bold text-center">GOODS NAME SPACE</div>
        <div class="flex justify-between items-start">
          <div class="leading-loose text-[14px]">
            <p>SADH: 88</p>
            <p>+109 to Attes Rating</p>
            <p>SADH: 88</p>
            <p>+109 to Attes Rating</p>
            <p>+109 to Attes Rating</p>
            <p>+109 to Attes Rating</p>
            <p>+109 to Attes Rating</p>
          </div>
          <img src="@/assets/icons/hardcore.webp" alt="" class="w-20" />
        </div>
        <div class="flex flex-col items-end gap-5">
          <div>$123</div>
          <Button bg="#f9a044"> ADD TO CART </Button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.ant-select,
.ant-input {
  border-radius: 0;
  border: 1px solid #333;
}
</style>
